<div id="container" class="easyui-layout" fit="true">
	<div data-options="region:'south'" style="overflow:hidden">
		<button id="btn_ok" style="float:left;margin-top:10px;">OK</button>
		<button id="btn_cancel" style="float:right;margin-top:10px;">Cancel</button>
	</div>

	<div id="particles" data-options="region:'center'" style="overflow:hidden;width:350px;height:480px;">
	</div>
	<div data-options="region:'east'" style="overflow:hidden;width:200px;">
		<div id="particleproperty">property</div>
	</div>
</div>
<script>
	$(document).ready(function(){
		var editor=edt;
		if(editor.node.selected==null){
			$('#dd').dialog('close');
			return false;
		}
		var selected=editor.node.selected;
		var emitter;
		var data=[];
		for( key in selected){
			if(key=='x'||key=='y')continue;
			switch(key){
			case 'id':
			case 'type':
			case 'visible':type='none';break;
			default:type='numberbox';break;
			}
			data.push({name:key,value:selected[key],group:'default',editor:type});
		}
		$('#particleproperty').propertygrid({
			data: data,
			onEndEdit : function (index, field, changes) {
				var name = field['name'];
				var value = field['value'];
				emitter[name]=parseInt(value);
				selected[name]=parseInt(value);
			}
		});
		var game = new Phaser.Game(300, 400, Phaser.CANVAS, 'particles', { preload: preload, create: create, render: render});

		function preload() {
			game.load.image('particle', 'data/particle.png');
		}
		function create() {
			game.stage.backgroundColor = '#000000';
			emitter = game.add.emitter(game.world.centerX, game.world.centerY);
			emitter = emitter.makeParticles('particle');
			emitter.start(false);
			for(key in selected){
				if(key=='x'||key=='y')continue;
				emitter[key]=selected[key];
			}
			game.input.onDown.add(updatePoint, this);
		}
		function updatePoint(e){
			if (game.input.mousePointer.isDown){
				emitter.x=game.input.activePointer.worldX;
				emitter.y=game.input.activePointer.worldY;
			}
		}
		function render() {
			game.debug.text(emitter.total, 32, 32);
		}
		$("#btn_ok").click(function(){
			for(key in selected){
				if(key=='x'||key=='y')continue;
				editor.attr.setAttr(editor.node.selected,key,selected[key]);
			}
			$('#dd').dialog('close');
		});
		$("#btn_cancel").click(function(){
			$('#dd').dialog('close');
		});
	});
</script>